<template>
  <!-- 电池堆 配置 -->
  <a-form
    :model="form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    layout="vertical"
    ref="formRef"
    :rules="rules"
    :disabled="!configData.isEdit"
  >
    <a-form-item label="所属厂商" name="supplierId">
      <a-select
        v-model:value="form.supplierId"
        class="formInput"
        placeholder="请选择"
        @change="changeSupplierType"
        allow-clear
        :loading="formLoading"
      >
        <a-select-option
          v-for="item in supplierList"
          :value="item.supplierId"
          :key="item.supplierId"
        >
          {{ item.supplierShortName }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="所属型号" name="typeId">
      <a-select
        v-model:value="form.typeId"
        class="formInput"
        placeholder="请选择"
        allow-clear
        :loading="formLoading"
      >
        <a-select-option
          v-for="item in supplierTypeList"
          :value="item.id"
          :key="item.id"
        >
          {{ item.type }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="所属变压器">
      <a-select
        v-model:value="form.tfId"
        class="formInput"
        placeholder="请选择"
        allow-clear
        :loading="formLoading"
      >
        <a-select-option
          v-for="item in BIAN_YA_QI_LIST"
          :value="item.systemId"
          :key="item.systemId"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="高压侧变压器数据来源" name="gtfId" v-if="isHighVoltage">
      <a-select
        v-model:value="form.gtfId"
        class="formInput"
        placeholder="请选择"
        allow-clear
        :loading="formLoading"
      >
        <a-select-option
          v-for="item in BIAN_YA_QI_LIST"
          :value="item.systemId"
          :key="item.systemId"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="电池堆名称" name="name">
      <a-input v-model:value="form.name" class="formInput" />
    </a-form-item>
    <a-form-item label="资产设备编号" name="orderNum">
      <a-input v-model:value="form.orderNum" class="formInput" />
    </a-form-item>
    <a-form-item label="电池堆资产编码" name="assetCode">
      <a-input v-model:value="form.assetCode" class="formInput" />
    </a-form-item>
    <a-form-item label="是否为主电池堆" name="isMain">
      <a-select class="formSelect" v-model:value="form.isMain">
        <a-select-option :value="1">是</a-select-option>
        <a-select-option :value="0">否</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="支路关口表数据来源">
      <a-select class="formSelect" v-model:value="form.branchGatWayDataSource" placeholder="请选择">
        <a-select-option
          v-for="item in gatewayList"
          :value="item.id"
          :key="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item v-if="form.isMain === 0" label="所属电池堆" name="belongId">
      <a-select class="formSelect" v-model:value="form.belongId">
        <a-select-option
          v-for="item in energyLinkList"
          :value="item.deviceId"
          :key="item.deviceId"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item v-if="form.isMain === 0" label="并网表数据来源">
      <a-select class="formSelect" v-model:value="form.dataSource">
        <a-select-option :value="0">否</a-select-option>
        <a-select-option :value="1">是</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="唯一标识/设备序列号" name="idx">
      <a-input v-model:value="form.idx" class="formInput" />
    </a-form-item>
    <a-form-item label="汇流柜是否存在断路器" name="isBreaker">
      <a-select
        class="formSelect"
        v-model:value="form.isBreaker"
        @change="changeIsBreaker"
      >
        <a-select-option :value="1">是</a-select-option>
        <a-select-option :value="0">否</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item v-if="form.isBreaker" label="断路器名称" name="breakerName">
      <a-input v-model:value="form.breakerName" class="formInput" />
    </a-form-item>
    <a-form-item
      v-if="form.isBreaker"
      label="断路器资产编码"
      name="breakerAssetCode"
    >
      <a-input
        v-model:value="form.breakerAssetCode"
        class="formInput"
      />
    </a-form-item>
    <!-- <a-form-item label="是否有结算电表" name="isAccountMeter">
      <a-select
        class="formSelect"
        v-model:value="form.isAccountMeter"
        @change="changeIsAccountMeter"
      >
        <a-select-option :value="1">是</a-select-option>
        <a-select-option :value="0">否</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      v-if="form.isAccountMeter"
      label="结算电表名称"
      name="accountMeterName"
    >
      <a-input v-model:value="form.accountMeterName" class="formInput" />
    </a-form-item>
    <a-form-item
      v-if="form.isAccountMeter"
      label="结算电表资产编码"
      name="accountMeterAssetCode"
    >
      <a-input
        v-model:value="form.accountMeterAssetCode"
        class="formInput"
        disabled
      />
    </a-form-item>
    <a-form-item
      v-if="form.isAccountMeter"
      label="结算电表ID/结算电表设备号"
      name="accountMeterIdx"
    >
      <a-input v-model:value="form.accountMeterIdx" class="formInput" />
    </a-form-item> -->
  </a-form>
  <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
    <a-button v-if="!configData?.isEdit" type="primary" @click="handleEdit"
      >编辑</a-button
    >
    <a-button
      v-else
      type="primary"
      @click="onSubmit"
      :loading="stionConfigState.configDataSaveLoading"
      >保存</a-button
    >
  </a-form-item>
</template>
<script setup>
;
import { useStionConfigStore } from "@/stores/stationConfig";
const { stionConfigState, changeConfigData } = useStionConfigStore();
import { EQUIP_TYPE } from "@/constants/stationConfig";
import { cloneDeep } from "lodash-es";
const configData = computed(() => stionConfigState.configData);
const emits = defineEmits(["getConfig"]);
const props = defineProps({
  rowData: {
    type: Object,
  },
  elements: {
    type: Array,
  },
});
watch(
  () => stionConfigState.configData,
  async (val) => {
    handleInit();
  },
  { deep: true }
);
const isHighVoltage = computed(() => props.rowData.isHighVoltage); // 是否高压项目
const BIAN_YA_QI_LIST = computed(() =>
  props.elements.filter((item) => item.type === EQUIP_TYPE.BIAN_YA_QI)
);
const $api = inject("$api");
const form = ref({
  supplierId: null,
  typeId: null,
  tfId: null,
  gtfId: null,
  name: null,
  assetCode: null,
  orderNum: null,
  isMain: null,
  belongId: null,
  idx: null,
  isBreaker: null,
  breakerName: null,
  breakerAssetCode: null,
  isAccountMeter: null,
  accountMeterName: null,
  accountMeterAssetCode: null,
  accountMeterIdx: null,
  type: EQUIP_TYPE.DIAN_CHI_DUI,
  dataSource: 0,
  branchGatWayDataSource: null,
});
const rules = {
  supplierId: [{ required: true, message: "请选择", trigger: "change" }],
  typeId: [{ required: true, message: "请选择", trigger: "change" }],
  gtfId: [{ required: true, message: "请选择", trigger: "change" }],
  isMain: [{ required: true, message: "请选择", trigger: "change" }],
  belongId: [{ required: true, message: "请选择", trigger: "change" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  assetCode: [{ required: true, message: "请输入", trigger: "blur" }],
  orderNum: [{ required: true, message: "请输入", trigger: "blur" }],
  gatewayName: [{ required: true, message: "请输入", trigger: "blur" }],
  gatewayAssetCode: [{ required: true, message: "请输入", trigger: "blur" }],
  isBreaker: [{ required: true, message: "请选择", trigger: "change" }],
  breakerName: [{ required: true, message: "请输入", trigger: "blur" }],
  breakerAssetCode: [{ required: true, message: "请输入", trigger: "blur" }],
  isAccountMeter: [{ required: true, message: "请选择", trigger: "change" }],
  accountMeterName: [{ required: true, message: "请输入", trigger: "blur" }],
  accountMeterAssetCode: [
    { required: true, message: "请输入", trigger: "blur" },
  ],
  accountMeterIdx: [{ required: true, message: "请输入", trigger: "blur" }],
  idx: [{ required: true, message: "请输入", trigger: "blur" }],
};
const formRef = ref(null);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      form.value.type = EQUIP_TYPE.DIAN_CHI_DUI;
      emits("getConfig", toRaw(form));
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 };
const supplierList = ref([]);
const supplierTypeList = ref([]);
const getSupplierTypeTree = async () => {
  const res = await $api.supplierTypeTree();
  supplierList.value = res.data;
};
const handleSupplierTypeList = (id) => {
  supplierTypeList.value =
    supplierList.value.filter((item) => item.supplierId === id)[0]
      ?.supplierTypeEntities || [];
};
const changeSupplierType = (id) => {
  form.value.typeId = null;
  handleSupplierTypeList(id);
};
const changeIsBreaker = async (val) => {
  if (val) {
    const res = await $api.assertCode({
      type: EQUIP_TYPE.DUAN_LU_QI,
    });
    form.value.breakerAssetCode = res.data;
    form.value.breakerModelType = EQUIP_TYPE.DUAN_LU_QI;
  }
};
const changeIsAccountMeter = async (val) => {
  if (val) {
    const res = await $api.assertCode({
      type: EQUIP_TYPE.JI_LIANG_DIAN_BIAO,
    });
    form.value.accountMeterAssetCode = res.data;
    form.value.accountMeterModelType = EQUIP_TYPE.JI_LIANG_DIAN_BIAO;
  }
};
const energyLinkList = ref([]);
const getEnergyLinkPage = async () => {
  // 获取电池堆列表 如果不是主电池堆，需要拉取电池堆列表指定所属
  const res = await $api.energyLinkList({
    stationId: props.rowData.stationId,
  });
  energyLinkList.value = res?.data;
};
const gatewayList = ref([]);
const stationGateway = async () => {
  // 获取支路关口表数据
  const res = await $api.stationGateway(props.rowData.stationId);
  gatewayList.value = res?.data;
};
const handleEdit = () => {
  changeConfigData({
    ...stionConfigState.configData,
    isEdit: true,
  });
};
const handleInit = async () => {
  form.value = cloneDeep(stionConfigState.configData);
  // 数据来源字段如果为空，默认为否（0）
  form.value.dataSource =
    form.value.dataSource !== undefined ? form.value.dataSource : 0;
  const supplierId =
    stionConfigState.configData.supplierId ||
    stionConfigState.equipData.supplierId;
  const typeId =
    stionConfigState.configData.typeId ||
    stionConfigState.equipData.supplierTypeId;
  form.value.supplierId = supplierId;
  handleSupplierTypeList(supplierId);
  await nextTick();
  form.value.typeId = typeId;
};
onMounted(async () => {
  await getSupplierTypeTree();
  await getEnergyLinkPage();
  await stationGateway();
  handleInit();
});
</script>
<style lang="less" scoped>
.formInput {
  width: 175px;
  text-align: left;
}
.formSelect {
  width: 175px;
  text-align: left;
}
</style>